<template>
  <div class="running-rate">
    <div class="chart-title">设备稳定运行率</div>
    <div id="runningRateChart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'RunningRate',
  data() {
    return {
      runningRateChart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initRunningRateChart();
    });
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (this.runningRateChart) {
      this.runningRateChart.dispose();
      this.runningRateChart = null;
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initRunningRateChart() {
      const chartContainer = document.getElementById('runningRateChart');
      if (!chartContainer) return;

      if (!this.runningRateChart) {
        this.runningRateChart = echarts.init(chartContainer);
      }

      const option = {
        grid: {
          top: 10,
          left: 40,
          right: 20,
          bottom: 30
        },
        xAxis: {
          type: 'category',
          data: ['3.28', '', '3.30', '', '4.1', '', '4.3', '', '4.5'],
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
          axisLabel: {
            color: '#8f9bb3',
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          interval: 25,
          axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              type: 'dashed'
            }
          },
          axisLabel: {
            color: '#8f9bb3',
            formatter: '{value}%'
          }
        },
        series: [
          {
            type: 'bar',
            data: [78, 28, 48, 47, 23, 69, 27, 60, 12, 30],
            itemStyle: {
              color: '#00a0e9'
            }
          }
        ]
      };

      this.runningRateChart.setOption(option);
    },

    handleResize() {
      if (this.runningRateChart) {
        this.runningRateChart.resize();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './mixins/cardStyles.scss';

.running-rate {
  height: calc(50% - 7.5px);
  @include card-base-style;

  .chart-title {
    @include card-title-style;
  }

  .chart {
    flex: 1;
    padding: 10px;
    height: calc(100% - 40px);
  }
}
</style>
